<template>
  <div class="kuai-shou">
    <div class="banner"><img :src="globalConfig.banner" alt=""></div>
    <van-form @submit="submit" class="kuai-shou-form" >
      <van-cell-group inset>
        <van-field class="title-field">
          <template #label>
            <div class="title">预约信息</div>
          </template>
        </van-field>
        <van-field
            v-model="form.product"
            name="product"
            label="咨询项目"
            placeholder="请输入想要咨询的项目"
            :rules="[{ required: true, message: '咨询的项目不能为空' }]"
        />

        <van-field
            v-model="form.realname"
            name="realname"
            label="姓名"
            placeholder="请输入您的姓名"
            :rules="[{ required: true, message: '请输入您的姓名' }]"
        />
        <van-field
            v-model="form.phone"
            name="phone"
            label="手机号"
            placeholder="请输入手机号码"
            :rules="[{ validator:patternPhone,required: true, message: '请输入正确的手机号' }]"
        />
      </van-cell-group>
      <div class="btn-line"></div>
      <div class="">
        <van-action-bar class="kuai-shou-bar">
          <van-action-bar-button type="danger" text="立即提交" class="kuai-shou-button" native-type="submit"/>
        </van-action-bar>
      </div>
    </van-form>
  </div>
</template>

<script>
import {
  ActionBar,
  ActionBarButton,
  Button,
  CellGroup,
  Dialog,
  Field,
  Form,
  Icon,
  NumberKeyboard,
  PasswordInput,
  showDialog,
  showToast,
  Popup,
  DatePicker,
  Tab,
  Tabs,
} from 'vant';
import axios from 'axios';
import {useConfigStore} from "@/stores/configStore";

export default {
  name: 'PageIndex',
  props: {
    msg: String
  },
  components: {
    vanButton: Button,
    vanForm: Form,
    vanField: Field,
    vanCellGroup: CellGroup,
    vanActionBar: ActionBar,
    vanActionBarButton: ActionBarButton,
    vanDialog: Dialog,
    vanPasswordInput: PasswordInput,
    vanNumberKeyboard: NumberKeyboard,
    vanIcon: Icon,
    vanPopup: Popup,
    vanDatePicker: DatePicker,
    vanTab: Tab,
    vanTabs: Tabs,
  },
  data() {
    //身份证号码
   const patternPhone = (val) => /^1[3-9]\d{9}$/.test(val);

    //测试打开

    // const patternPhone = (val) => true;
    return {
      form: {
        product: '',
        realname: '',
        phone: '',
      },
      patternPhone,
      doLoad: false,
    }
  },
  created() {

  },
  mounted() {

  },
  computed: {
    globalConfig() {
      let config = useConfigStore().globalConfig;
      if (config && config.index_title) {
        document.title = config.index_title;
      }
      return config
    },
  },
  methods: {
    //普通提交
    submit() {

      if (this.doLoad) return;
      this.doLoad = true;
      let showToast1 = showToast({
        message: '提交中...',
        duration: 0,
      });
      axios.post('/api/log/submit', this.form).then((res) => {
        this.doLoad = false;
        showToast1.close()
        let resData = res.data;
        if (resData.code === 0) {
          showDialog({
            message: resData.msg,
            theme: 'round-button',
          });
          return;
        }
        this.form = this.$options.data().form;

        console.log("resData",resData)
        showDialog({
          'message': resData.msg ,
          theme: 'round-button',
        }).then(() => {
          // toAboutUrl();
          // location.reload();
        });
      }).catch((err) => {
        this.doLoad = false;
        showToast1.close()
        showDialog({
          message: err,
          theme: 'round-button',
        });
      })
    },

    onInput(val) {

    },
  },
  watch: {

  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
:root:root {
  --van-number-keyboard-key-height: 36px;
  --van-password-input-height: 20px;
}

.kuai-shou {
  display: block;
  background: #f7f7f7;
  height: 100vh;
  width: 100%;
}

.kuai-shou-form {
}

.van-field__label {
  color: #262626;
}

.van-cell-group--inset {
  margin: -20px 0 10px;
}

.line-field {
  padding: 0;
  margin: 0;
}

.title-field {
  margin-top: 26px;
  border-radius: 8px 8px 0 0;

}

.title-field:after, .line-field:after {
  content: none;
}

.title {
  font-size: 16px;
  color: #222222;
  font-weight: 600;
}

.banner img {
  width: 100%;
}

.tk-nav {
  width: 50%;
  text-align: center;
}

.tk-nav-active {
  background: #fe364d;
  color: #FFFFFF;
}

.btn-line {
  padding: 6% 2%;
  height: var(--van-action-bar-height);
}

.kuai-shou-bar {
  padding: 4% 2%;
}

.kuai-shou-button {
  background: #fe364d;
  border-radius: 8px;
  font-size: 14px;
}

.password-top img {
  width: 100%;
}

.notice {
  padding: 2% 10%;
  font-size: 16px;
  font-family: PingFang SC, PingFang SC-Regular;
  font-weight: 400;
  text-align: left;
  color: #222222;
  line-height: 26px;
}

.password-input {
  margin: 10px 4px;
}

.password-btn {
  margin: 34px 0;
  padding: 0 5%;
}

.close-password {
  position: absolute;
  top: 4%;
  right: 4%;
}

.close-password .van-icon {
  font-size: 26px;
}

.date-diff {
  padding: 0 10px;
}
</style>
<style>
.van-password-input__security li {
  border: 1px solid #c1c1c1;
}

.van-tabs__wrap .van-tab {
  line-height: 20px !important;
}

.van-tabs__wrap .van-tabs__nav--line {
  padding-bottom: 4px !important;
}
</style>
